// component/progressRing/progressRing.js
Component({
    /**
     * 组件的属性列表
     */
    externalClasses: ['className'],
    properties: {
        percent: {
            type: Number,
            value: 0
        },
        timer: {
            type: Number,
            // value: 5000
        },
        width: {
            type: Number,
            value: 50
        },
        borderWidth: {
            type: Number,
            value: 5
        },
        color: {
            type: String,
            value: '#000'
        },
        monitor: {
            type: Boolean,
            value: true
        }
    },
    observers: {
        'percent': function(percent) {
            this.setData({
                targetPercent: percent
            })
            this.setPercent();

        }
    },
    /**
     * 组件的初始数据
     */
    lifetimes: {
        ready() {
            this.setData({
                targetPercent: this.data.percent
            })
            this.setPercent();
            if (this.data.timer) {
                this.setData({
                    extendsL: 'anime-left',
                    extendsR: 'anime-right',
                })
                for (let i = Math.ceil(this.data.timer / 1000), j = 0; i >= 0; i--, j++) {
                    setTimeout(() => {
                        this.setData({
                            displayNum: i
                        })
                    } ,j * 1000)
                }
            }
        }
    },
    data: {
        leftPercent: 0,
        targetPercent: 0,
        extendsL: '',
        extendsR: '',
        displayNum: 0
    },

    /**
     * 组件的方法列表
     */
    methods: {
        setPercent() {
            const percent = this.data.targetPercent;
            if (percent > 50) this.setData({
                leftPercent: 0.5,
                displayNum: percent
            })
            else this.setData({
                leftPercent: percent / 100,
                displayNum: percent
            })
        },

    }
})